<template>
    <div>
        <form style="margin-bottom: 10px">
            <label for="filterField">
                Field:
                <select id="filterField" v-model="filterField">
                    <option value="">Disable filters</option>
                    <option value="isActive">Active User</option>
                    <option value="name">Name</option>
                    <option value="email">Email</option>
                    <option value="balance">Balance</option>
                    <option value="registered">Date registered</option>
                </select>
            </label>
            <label for="fieldQuery" v-show="this.filterField && !isActiveFilterSelected()">
                Query:
                <input type="text" id="fieldQuery" v-model="filterQuery">
            </label>
            <span v-show="isActiveFilterSelected()">
                Active:
                <label for="userStateActive">
                    <input type="radio" name="activeState" v-model="filterUserState" :value="true" id="userStateActive" selected>Yes
                </label>
                <label for="userStateInactive">
                    <input type="radio" name="activeState" v-model="filterUserState" :value="false" id="userStateInactive">No
                </label>
            </span>
        </form>
        <table>
            <tr v-for="person in people" :key="person.name" v-show="filterRow(person)">
                <td>{{ person.name }}</td>
                <td>
                    <a :href="'mailto:' + person.email">{{ person.email }}</a>
                </td>
                <td :class="blanceClass(person)">{{ formatBalance(person.balance) }}</td>
                <td>{{ formatDate(person.registered.toString()) }}</td>
                <td v-bind:class="person.isActive ? 'active':'inactive'">
                    {{activeStatus(person)}}
                </td>
            </tr>
        </table>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

class Person {
    name: string
    email: string
    balance: number
    registered: Date
    isActive: boolean

    constructor (name: string, email: string, balance: number, registered: Date, isActive: boolean) {
        this.name = name
        this.email = email
        this.balance = balance
        this.registered = registered
        this.isActive = isActive
    }
}

@Component({})
export default class VForExamples extends Vue {
    name = 'VForExamples';
    currency = "$";
    filterField = "";
    filterQuery = "";
    filterUserState = "";
    activeStatus(person:Person):string{
        return person.isActive ? "Active":"Inactive";
    }
    formatBalance(balance:number):string{
        return this.currency + balance.toFixed(2);
    }
    formatDate(date:string):string{
        let registered = new Date(date);
        return registered.toLocaleString("zh-CN");
    }
    filterRow(person:any){
        let result = true;
        if(this.filterField){
            if(this.filterField === "isActive"){
                result = (typeof this.filterUserState === "boolean") ? (this.filterUserState === person.isActive) : true;
            }else{
                let query = this.filterQuery,
                    field = person[this.filterField.toString()];
                if (typeof field === 'number') {
                    query = query.replace(this.currency,"");
                    try {
                        result = field >= parseInt(query);
                    } catch (e) {
                    }
                }else{
                    field = field.toLowerCase();
                    result = field.includes(query.toLowerCase());
                }

            }
        }

        return result;
    }
    isActiveFilterSelected(){
        return (this.filterField === "isActive");
    }
    blanceClass(person:Person){
        let balanceLevel = "success";
        if(person.balance < 2000){
            balanceLevel = "danger";
        }else if(person.balance < 3000){
            balanceLevel = "warning"
        }
        let increasing = false;
        let balance = person.balance / 1000;
        if(Math.round(balance) == Math.ceil(balance)){
            increasing = 'increasing';
        }
        return [balanceLevel,increasing];
    }
    people: Array<Person> = [
        {
            name: 'Morales Ochoa',
            email: 'moralesochoa@savvy.com',
            balance: 2570.32,
            registered: new Date('2016-02-22T10:11:31'),
            isActive: true
        },
        {
            name: 'Tyson Beard',
            email: 'tysonbeard@savvy.com',
            balance: 1892.1,
            registered: new Date('2016-01-27T01:06:57'),
            isActive: true
        },
        {
            name: 'Hawkins Gibbs',
            email: 'hawkinsgibbs@saavu.com',
            balance: 3423.69,
            registered: new Date('2016-04-23T11:19:57'),
            isActive: false
        },
        {
            name: 'Conley Boyle',
            email: 'ConleyBoyle@saavu.com',
            balance: 3277.41,
            registered: new Date('2014-04-06T04:22:57'),
            isActive: true
        },
        {
            name: 'Joy Mosley',
            email: 'joymosley@saavu.com',
            balance: 2180.15,
            registered: new Date('2016-04-21T11:52:18'),
            isActive: true
        }
    ]
}
</script>

<style scoped>
table {
    border: 1px solid #c0c0c0;
    width: 100%;
    border-collapse: collapse;
}
table td{
    border: 1px solid black;
}
.active{
    background:green;
}
.inactive{
    background:red;
}
.success{
    background:#67C23A
}
.warning{
    background:#E6A23C
}
.danger{
    background:#F56C6C
}
.info{
    background:#909399
}
</style>
